<template>
  <div>
    <div class="tab">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="券核销" name="1" />
        <el-tab-pane label="卡核销" name="2" />
        <el-tab-pane label="预约订单" name="3" />
        <el-tab-pane label="预订订单" name="4" />
        <el-tab-pane label="自提订单" name="5" />
      </el-tabs>
    </div>
    <div class="content">
      <CouponCancel v-if="activeTab == '1'" :isDetail="true" :vip-detail="vipDetail" />
      <CardCancel v-if="activeTab == '2'" :isDetail="true" :vip-detail="vipDetail" />
      <XhOrder v-if="activeTab == '3'" :isDetail="true" type="3" :vip-detail="vipDetail" />
      <XhOrder v-if="activeTab == '4'" :isDetail="true" type="4" :vip-detail="vipDetail" />
      <XhOrder v-if="activeTab == '5'" :isDetail="true" type="5" :vip-detail="vipDetail" />
    </div>
  </div>
</template>

<script>
import CouponCancel from "./CouponCancel";
import CardCancel from "./CardCancel";
import XhOrder from "./XhOrder";
export default {
  components: {
    CouponCancel,
    CardCancel,
    XhOrder,
  },
  data() {
    return {
      activeTab: "0",
    };
  },
  props: {
    activeName: {
      type: String,
      require: true,
    },
    vipDetail: {
      type: Object,
    },
  },
  watch: {
    activeName(newVal, oldValue) {
      if (newVal == "couponVerify") {
        this.activeTab = "1";
      } else {
        this.activeTab = "0";
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.coupon-card {
  .app-main-content-box {
    margin-bottom: 10px;
  }
}
</style>
